<template>
	<view class="container">

		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left">
				<van-icon name="notes-o" size="20" color="#3b82f6" />
				<text class="header-title">签到</text>
			</view>
			<!-- <van-icon name="clock-o" size="20" color="#3b82f6" /> -->
		</view>
		<!-- 签到按钮 -->
		<view class="sign-btn-container">
			<button @click="handleScan" :class="['sign-btn', isScanning ? '' : 'pulse']"
				:style="{background: btnBackground}">
				<van-icon :name="btnIcon" size="48" color="#fff" />
				<text>{{btnText}}</text>
			</button>
			<!-- <text class="sign-status">今日签到状态: <text :class="signStatusClass">{{signStatusText}}</text></text> -->
		</view>

		<!-- 用户信息 -->
		<view class="user-card">
			<view class="user-avatar-container">
				<img class="user-avatar" :src="userinfo.avatar_url" alt="用户头像" />
			</view>
			<view class="user-info">
				<text class="user-name">{{userinfo.name}}</text>
				<view class="user-details">
					<text class="user-id">用户ID: {{userinfo.id}}</text>
					<view class="status-badge">
						<van-icon name="circle" size="10" color="#3b82f6" />
						<text class="status-text">在线</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 当前签到项目 -->
		<view class="card">
			<view class="card-header">
				<van-icon name="todo-list-o" size="16" color="#fff" />
				<text>当前签到项目</text>
			</view>
			<view class="card-content">
				<view class="info-item">
					<view class="info-icon">
						<van-icon name="description" size="16" color="#3b82f6" />
					</view>
					<view>
						<text class="info-title">项目名称</text>
						<text class="info-value">{{currentEvent.title}}</text>
					</view>
				</view>

				<view class="info-item">
					<view class="info-icon">
						<van-icon name="location-o" size="16" color="#3b82f6" />
					</view>
					<view>
						<text class="info-title">签到地点</text>
						<text class="info-value">{{currentEvent.place}}</text>
					</view>
				</view>

				<view class="info-item">
					<view class="info-icon">
						<van-icon name="clock-o" size="16" color="#3b82f6" />
					</view>
					<view>
						<text class="info-title">签到时间</text>
						<text class="info-value">{{currentEvent.starttime}} 至 
						{{currentEvent.endtime}}</text>
					</view>
				</view>

				<view class="info-item">
					<view class="info-icon">
						<van-icon name="user-o" size="16" color="#3b82f6" />
					</view>
					<view>
						<text class="info-title">项目ID</text>
						<text class="info-value">{{currentEvent.qingdao_project_id}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 历史签到记录 -->
		<view class="card">
			<view class="card-header">
				<van-icon name="clock-o" size="16" color="#fff" />
				<text>历史签到记录</text>
			</view>
			<view class="record-list">
				<view v-for="(record, index) in signRecords" :key="index" class="record-item" :class="record.status">
					<view class="record-icon">
						<van-icon name="checked" size="20" color="#10b981" />
					</view>
					<view class="record-info">
						<text class="record-event">{{record.project_name}}</text>
						<view class="record-details">
							<text>{{record.addtime}}</text>
						</view>
					</view>
					<text class="record-status">已签到</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		scanCode,
		qingdaoProject,
		getSanCodePageData
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync("userinfo"),
				currentEvent: {
					name: '',
					location: '',
					time: '',
					manager: ''
				},
				signRecords: [
				],
				isScanning: false,
				btnText: '扫码签到',
				btnIcon: 'scan',
				btnBackground: 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
				todaySignCount: 1
			}
		},
		computed: {
			signStatusText() {
				return this.todaySignCount > 0 ? `已签到 ${this.todaySignCount} 次` : '未签到'
			},
			signStatusClass() {
				return this.todaySignCount > 0 ? 'success-text' : 'normal-text'
			}
		},
		onLoad() {
			this.ongetSanCodePageData()
		},
		methods: {
			ongetSanCodePageData() {
				let data = {
					userId: uni.getStorageSync("userinfo").id
				}
				getSanCodePageData(data).then(res=>{
					if(res.state === "ok") {
						// 设置当前签到项目
						this.currentEvent = {
							title: res.data.title,
							place: res.data.place,
							starttime: res.data.starttime,
							endtime: res.data.endtime,
							qingdao_project_id: res.data.qingdao_project_id,
							clockId:res.data.clockId
						}
						
						// 设置历史签到记录
						this.signRecords = res.clock.map(item => {
							return {
								project_name: item.project_name,
								addtime: item.addtime,
								status: 'success',
								statusText: '已签到'
							}
						})
					}
				})
			},
			onscanCode() {
				let data = {
					projectId: this.projectId,
					projectName: this.projectName,
					name: uni.getStorageSync("userinfo").name,
					userId: uni.getStorageSync("userinfo").id,
					status: "",
					clockId:this.currentEvent.clockId
				}
				scanCode(data).then(res => {
					if (res.state == "ok") {
						this.handleSignSuccess()
						setTimeout(() => {
							this.resetButton()
						}, 5000)
					} else {
						this.handleSignFail("网络异常")
					}

				})
			},
			async handleScan() {
				if (this.isScanning) return
				this.isScanning = true
				this.btnText = '正在解析二维码'
				this.btnIcon = 'loading'

				try {
					const res = await uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode']
					})

					// 打印扫码结果
					console.log('扫码结果:', JSON.parse(res.result))
					this.projectId = JSON.parse(res.result).projectId
					this.projectName = JSON.parse(res.result).projectName
					if (this.projectId && this.projectName) {
						this.onscanCode()
					} else {
						this.handleSignFail("二维码解析失败")
					}



				} catch (error) {
					console.error('扫码失败:', error)
					if (error.errMsg === 'scanCode:fail cancel') {
						this.resetButton()
					} else {
						this.handleSignFail('扫码失败，请重试')
					}
				}
			},
			// 签到成功后的展示
			handleSignSuccess(params) {
				this.btnText = '打卡成功'
				this.btnIcon = 'passed'
				this.btnBackground = 'linear-gradient(135deg, #10b981, #059669)'
				this.todaySignCount++
				this.signRecords.unshift()
			},


			// 签到失败后的展示
			handleSignFail(message) {
				this.btnText = message
				this.btnIcon = 'close'
				this.btnBackground = 'linear-gradient(135deg, #ef4444, #dc2626)'

				setTimeout(() => {
					this.resetButton()
				}, 2000)


			},

			// 签到重置为：可以签到
			resetButton() {
				this.isScanning = false
				this.btnText = '扫码签到'
				this.btnIcon = 'scan'
				this.btnBackground = 'linear-gradient(135deg, #3b82f6, #1d4ed8)'
			}
		}
	}
</script>

<style>
	/* 用户卡片 - 优化后样式 */
	.user-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
	}

	.user-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 8rpx;
		background-color: #3b82f6;
	}

	.user-avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
		border: 4rpx solid #eff6ff;
		box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.1);
	}

	.user-avatar {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #1e293b;
		display: block;
		margin-bottom: 10rpx;
	}

	.user-details {
		display: flex;
		align-items: center;
	}

	.user-id {
		font-size: 28rpx;
		color: #64748b;
	}

	.status-badge {
		display: flex;
		align-items: center;
		background-color: #eff6ff;
		border-radius: 20rpx;
		padding: 4rpx 12rpx;
		margin-left: 20rpx;
	}

	.status-text {
		font-size: 24rpx;
		color: #1e40af;
		margin-left: 6rpx;
	}

	.container {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 20rpx 30rpx 100rpx;
		background-color: #f8fafc;
		box-sizing: border-box;
	}

	/* 头部样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #3b82f6;
		margin-left: 15rpx;
	}

	/* 用户卡片 */
	.user-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 8rpx;
		background-color: #3b82f6;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		color: #fff;
		font-size: 48rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.user-details {
		display: flex;
		align-items: center;
		margin-top: 15rpx;
		font-size: 28rpx;
		color: #666;
	}

	.status-badge {
		display: flex;
		align-items: center;
		background-color: #dbeafe;
		color: #1e40af;
		padding: 6rpx 15rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.status-badge text {
		margin-left: 8rpx;
	}

	/* 卡片样式 */
	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		background: linear-gradient(to right, #3b82f6, #1d4ed8);
		padding: 25rpx 30rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	.card-header text {
		margin-left: 15rpx;
	}

	.card-content {
		padding: 30rpx;
	}

	/* 信息项 */
	.info-item {
		display: flex;
		margin-bottom: 40rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		background-color: #eff6ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.info-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		display: block;
	}

	.info-value {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	/* 签到按钮 */
	.sign-btn-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx 0;
	}

	.sign-btn {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 20rpx 30rpx -6rpx rgba(59, 130, 246, 0.3);
		border: none;
		outline: none;
	}

	.sign-btn:active {
		transform: scale(0.98);
	}

	.sign-btn text {
		margin-top: 20rpx;
	}

	.sign-status {
		font-size: 28rpx;
		color: #666;
		margin-top: 30rpx;
	}

	.success-text {
		color: #10b981;
		font-weight: 500;
	}

	.normal-text {
		color: #666;
		font-weight: 500;
	}

	/* 历史记录 */
	.record-list {
		max-height: 500rpx;
		overflow-y: auto;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f1f5f9;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-item.success {
		border-left: 8rpx solid #10b981;
	}

	.record-item.late {
		border-left: 8rpx solid #f59e0b;
	}

	.record-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.record-item.success .record-icon {
		background-color: #ecfdf5;
	}

	.record-item.late .record-icon {
		background-color: #fffbeb;
	}

	.record-info {
		flex: 1;
	}

	.record-event {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		display: block;
	}

	.record-details {
		display: flex;
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666;
	}

	.record-details text:first-child {
		margin-right: 30rpx;
	}

	.record-status {
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	.record-item.success .record-status {
		color: #10b981;
	}

	.record-item.late .record-status {
		color: #f59e0b;
	}

	/* 动画效果 */
	.pulse {
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}
</style>